<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .el-header {
            background-color: #0095d7;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        h1{
            float: left;
            font-size: 22px;
            color: white;
            margin: 0;
        }
        .cell{
            text-align: center !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-header style="text-align: right; font-size: 12px">
            <h1>CoolShark商城后台管理系统</h1>
            <el-dropdown>
                <i class="el-icon-user-solid" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click="f1">修改密码</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>欢迎{{}}登录</span>
<!--            <a href="javascript:void(0)" @click="logout">退出登录</a>-->
        </el-header>

        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1']" @select="menuChange">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-flag"></i>分类管理</template>
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                        <el-menu-item index="1-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-picture"></i>轮播图管理</template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-shopping-cart-2"></i>商品管理</template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-main>
                <!--                商品分类管理展示开始-->

                <div v-if="index=='1-1'">
                    <el-button size="mini" type="danger" @click="deleteCategoryByids">批量删除</el-button><el-button size="mini" type="primary" @click="dialogFormVisible1 = true">增加分类</el-button>
                    <el-dialog title="新增分类" :visible.sync="dialogFormVisible1" >
                        <el-form :model="form">
                            <el-form-item label="分类名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" placeholder="请输新增分类名称"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="addCategory">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <el-table v-if="index=='1-1'" :data="categoryArr.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                          ref="multipleTable"
                          tooltip-effect="dark"
                          style="width: 100%"
                          @selection-change="handleSelectionChange">
<!--                    复选框-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="编号" width="150" >
                    </el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="name" label="分类名称" width="150" >
                    </el-table-column>

                    <el-table-column
                            align="right" width="240">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    width=""
                                    placeholder="输入关键字搜索"/>
                        </template>

                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-button
                                    size="mini"
                                    @click="updateCategory(scope.$index,scope.row)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="categoryDelete(scope.$index, scope.row)">删除</el-button>
                                <el-dialog title="修改分类" :visible.sync="dialogFormVisible" >
                                    <el-form :model="form">
                                        <el-form-item label="分类名称" :label-width="formLabelWidth">
                                            <el-input v-model="form.name" autocomplete="off" placeholder="请输入修改名称"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="sureUpdateCategory">确 定</el-button>
                                    </div>
                                </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                  <!--                商品分类管理展示结束-->

                <!--                轮播图管理展示开始-->
                <div v-if="index=='2-1'">
                    <el-button size="mini" type="danger" @click="deleteBannerByids">批量删除</el-button><el-button size="mini" type="primary" @click="dialogFormVisible1 = true">增加轮播图</el-button>
                    <el-dialog title="新增轮播图" :visible.sync="dialogFormVisible1" >
                        <el-form :model="form">
                            <el-form-item label="轮播图名称" :label-width="formLabelWidth">
                                <el-input v-model="form.bannername" autocomplete="off" placeholder="请输入轮播图名称"></el-input>
                            </el-form-item>
                            <el-form-item label="上传轮播图" :label-width="formLabelWidth">
                                <el-card>
                                    <!--选择图片组件开始-->
                                    <!--limit=1设置只能选择一张图片-->
                                    <el-upload
                                            ref="upload"
                                            limit="1"
                                            action="http://localhost:8080/banner/uploadBanner"
                                            name="picFile"
                                            list-type="picture-card"
                                            :on-preview="handlePictureCardPreview"
                                            :on-success="handleSuccess"
                                            :on-exceed="exceed"
                                            :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </el-card>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="addBanner">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <el-table v-if="index=='2-1'" :data="bannerArr.filter(data => !search || data.bannername.toLowerCase().includes(search.toLowerCase()))"
                          ref="multipleTable"
                          tooltip-effect="dark"
                          style="width: 100%"
                          @selection-change="handleSelectionChange">
                    <!--                    复选框-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="序号" width="80" >
                    </el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="bannername" label="轮播图名称" width="180" >
                    </el-table-column>
                    <el-table-column  label="图片" width="150">
                        <!--template模板 scope里面装着遍历的对象-->
                        <template slot-scope="scope">
                            <!--scope.row得到当前遍历的对象-->
                            <img :src="scope.row.url" style="width: 150px" alt="">
                        </template>
                    </el-table-column>

                    <el-table-column
                            align="right" width="240">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    width=""
                                    placeholder="输入关键字搜索"/>
                        </template>

                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-button
                                    size="mini"
                                    @click="updateBanner(scope.$index,scope.row)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="bannerDelete(scope.$index, scope.row)">删除</el-button>
                            <el-dialog title="修改轮播图" :visible.sync="dialogFormVisible" >
                                <el-form :model="form">
                                    <el-form-item label="轮播图名称" :label-width="formLabelWidth">
                                        <el-input v-model="form.bannername" autocomplete="off" placeholder="请输入修改的轮播图名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="上传轮播图" :label-width="formLabelWidth">
                                        <el-card>
                                            <!--选择图片组件开始-->
                                            <!--limit=1设置只能选择一张图片-->
                                            <el-upload
                                                    ref="upload"
                                                    limit="1"
                                                    action="http://localhost:8080/banner/uploadBanner"
                                                    name="picFile"
                                                    list-type="picture-card"
                                                    :on-preview="handlePictureCardPreview"
                                                    :on-success="handleSuccess"
                                                    :on-exceed="exceed"
                                                    :on-remove="handleRemove">
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                                <img width="100%" :src="dialogImageUrl" alt="">
                                            </el-dialog>
                                        </el-card>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="sureUpdateBanner">确 定</el-button>
                                </div>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                <!--                轮播图管理展示结束-->

                <!--                轮播图管理展示开始-->
                <div v-if="index=='3-1'">
                    <el-button size="mini" type="danger" @click="deleteProductByids">批量删除</el-button><el-button size="mini" type="primary" @click="dialogFormVisible1 = true">增加商品</el-button>
                    <el-dialog title="新增商品" :visible.sync="dialogFormVisible1" >
                        <el-form :model="form">
                            <el-form-item label="商品名称" :label-width="formLabelWidth">
                                <el-input v-model="form.proname" autocomplete="off" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item  label="商品价格" :label-width="formLabelWidth">
                                <el-input type="number" v-model="form.price" autocomplete="off" placeholder="商品价格"></el-input>
                            </el-form-item>
                            <el-form-item label="折扣价格" :label-width="formLabelWidth">
                                <el-input type="number" v-model="form.discountprice" autocomplete="off" placeholder="折扣价格"></el-input>
                            </el-form-item>
                            <el-form-item label="库存" :label-width="formLabelWidth">
                                <el-input type="number" v-model="form.stock" autocomplete="off" placeholder="库存数量"></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述" :label-width="formLabelWidth">
                                <el-input type="textarea" v-model="form.desproduct" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="商品类型" :label-width="formLabelWidth">
                                <el-select v-model="form.typeid" placeholder="请选择商品类型">
                                    <el-option v-for="category in categoryArr" :label="category.name" :value="category.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="上传商品图片" :label-width="formLabelWidth">
                                <el-card>
                                    <!--选择图片组件开始-->
                                    <!--limit=1设置只能选择一张图片-->
                                    <el-upload
                                            ref="upload"
                                            limit="5"
                                            action="http://localhost:8080/product/uploadProduct"
                                            name="picFile"
                                            list-type="picture-card"
                                            :on-preview="handlePictureCardPreview"
                                            :on-success="handleSuccess"
                                            :on-exceed="exceed"
                                            :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </el-card>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="addProduct">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <el-table v-if="index=='3-1'" :data="productArr.filter(data => !search || data.proname.toLowerCase().includes(search.toLowerCase()))"
                          ref="multipleTable"
                          tooltip-effect="dark"
                          style="width: 100%"
                          @selection-change="handleSelectionChange">
                    <!--                    复选框-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="序号" width="50" >
                    </el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="proname" label="商品名称" width="80" >
                    </el-table-column>
                    <el-table-column  label="商品图片" width="150">
                        <!--template模板 scope里面装着遍历的对象-->
                        <template slot-scope="scope">
                            <!--scope.row得到当前遍历的对象-->
                            <img :src="scope.row.urls[0]" style="width: 150px" alt="">
                        </template>
                    </el-table-column>

                    <el-table-column prop="desproduct" label="商品描述" width="200" >
                    </el-table-column>

                    <el-table-column prop="typeid" label="商品分类" width="80" >
                    </el-table-column>

                    <el-table-column prop="price" label="商品价格" width="80" >
                    </el-table-column>

                    <el-table-column prop="discountprice" label="折扣价格" width="80" >
                    </el-table-column>

                    <el-table-column prop="stock" label="库存" width="80" >
                    </el-table-column>

                    <el-table-column prop="sales" label="销量" width="80" >
                    </el-table-column>

                    <el-table-column prop="heatvalue" label="热度" width="80" >
                    </el-table-column>

                    <el-table-column prop="createTime" label="上架时间" width="180" >
                    </el-table-column>


                    <el-table-column
                            align="right" width="240">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    width=""
                                    placeholder="输入关键字搜索"/>
                        </template>

                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-button
                                    size="mini"
                                    @click="updateproduct(scope.$index,scope.row)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="productDelete(scope.$index, scope.row)">删除</el-button>
                            <el-dialog title="修改商品" :visible.sync="dialogFormVisible" >
                                <el-form :model="form">
                                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                                        <el-input v-model="form.proname" autocomplete="off" placeholder="商品名称"></el-input>
                                    </el-form-item>
                                    <el-form-item  label="商品价格" :label-width="formLabelWidth">
                                        <el-input type="number" v-model="form.price" autocomplete="off" placeholder="商品价格"></el-input>
                                    </el-form-item>
                                    <el-form-item label="折扣价格" :label-width="formLabelWidth">
                                        <el-input type="number" v-model="form.discountprice" autocomplete="off" placeholder="折扣价格"></el-input>
                                    </el-form-item>
                                    <el-form-item label="库存" :label-width="formLabelWidth">
                                        <el-input type="number" v-model="form.stock" autocomplete="off" placeholder="库存数量"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品描述" :label-width="formLabelWidth">
                                        <el-input type="textarea" v-model="form.desproduct" autocomplete="off" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品类型" :label-width="formLabelWidth">
                                        <el-select v-model="form.typeid" placeholder="请选择商品类型">
                                            <el-option v-for="category in categoryArr" :label="category.name" :value="category.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="上传商品图片" :label-width="formLabelWidth">
                                        <el-card>
                                            <!--选择图片组件开始-->
                                            <!--limit=1设置只能选择一张图片-->
                                            <el-upload
                                                    ref="upload"
                                                    limit="5"
                                                    action="http://localhost:8080/product/uploadProduct"
                                                    name="picFile"
                                                    list-type="picture-card"
                                                    :on-preview="handlePictureCardPreview"
                                                    :on-success="handleSuccess"
                                                    :on-exceed="exceed"
                                                    :on-remove="handleRemove">
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                                <img width="100%" :src="dialogImageUrl" alt="">
                                            </el-dialog>
                                        </el-card>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="sureUpdateProduct">确 定</el-button>
                                </div>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                <!--                商品管理展示结束-->

            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<script>

  let v = new Vue({
        el:'#app',
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                //商品分类管理
                tableData: Array(20).fill(item),
                index:'1-1',

                //商品分类数据
                categoryArr:[],

                //公用数据开始
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                form: {
                    name: ''
                },
                formLabelWidth: '120px',
                multipleSelection: [],
                search: '',
                //图片上传数据
                dialogImageUrl: '',
                dialogVisible: false,
                url:"",
                //公用数据结束

                //轮播图数据
                bannerArr:[],


                //商品管理数据
                productArr:[]
            }
        },
      created:function(){
          //发请求获取所有分类数据  this代表当前Vue对象
          //此处的this不能用v代替  created方法执行时 v还没有赋值
          this.loadCategory();
          //created方法中只能用this   axios发请求后只能用v
      },
        methods:{
            deleteProductByids(){
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let pros =v.multipleSelection
                    for (let pro of pros) {
                        pro.urls=''
                    }
                    console.log(pros)
                    axios.post("http://localhost:8080/product/deleteProductByids",pros)
                        .then(function (res) {
                            v.loadProduct()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateproduct(index,product){
                v.dialogFormVisible = true
                v.form.id=product.id
            },
            sureUpdateProduct(){
                //发布商品请求
                v.form.urls=v.url
                axios.post("http://localhost:8080/product/updateProduct",v.form)
                    .then(function (res) {
                        if (res.data==1){
                            v.dialogFormVisible = false
                            v.$message.success("修改成功!")
                            v.loadProduct()
                            v.form={}
                            v.$refs.upload.clearFiles()
                        }else {
                            this.$message.error("添加商品失败!")
                            v.form={}
                        }
                    })
                v.form={}
            },
            productDelete(index,product){
                  let pro=product
                  pro.urls= pro.urls.toString()
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("http://localhost:8080/product/deleteByid",pro)
                        .then(function (res) {
                            v.loadProduct()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addProduct(){
                v.form.id=null
                v.form.urls=v.url
                if (v.url==""||v.form.proname==''||v.form.price==null||v.form.desproduct==null||v.form.desproduct==''||v.form.typeid==null){
                    v.$message.warning("输入的值不能为空!")
                }else {
                    axios.post("http://localhost:8080/product/addproduct",v.form)
                        .then(function (res) {
                            if (res.data==1){
                                v.dialogFormVisible1 = false
                                v.$message.success("新增成功!")
                                v.loadProduct()
                                v.form={}
                                v.$refs.upload.clearFiles()
                            }else{
                                v.$message.error("新增失败您上传的文件大于10MB!")
                                v.form={}
                            }
                        })
                }
                v.form={}
            },
            //商品管理方法结束

            //轮播图管理方法开始
            deleteBannerByids(){
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("http://localhost:8080/banner/deleteBannerByids",v.multipleSelection)
                        .then(function (res) {
                            v.loadBanner()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addBanner(){
                v.form.id=null
                v.form.url=v.url
                if (v.url==""||v.form.bannername==''||v.form.bannername==null){
                    v.$message.warning("输入的值不能为空!")

                }else {
                    axios.post("http://localhost:8080/banner/addBanner",v.form)
                        .then(function (res) {
                            if (res.data==1){
                                v.dialogFormVisible1 = false
                                v.$message.success("新增成功!")
                                v.loadBanner()
                                v.form={}
                                v.$refs.upload.clearFiles()

                            }else{
                                v.$message.error("新增失败您上传的文件大于10MB!")
                                v.form={}
                            }
                        })
                }
                v.form={}
            },
            updateBanner(index,banner){
                v.dialogFormVisible = true
                v.form.id=banner.id
            },
            sureUpdateBanner(){
                //判断是否选择了图片
                if (v.url==""||v.form.bannername==''||v.form.bannername==null){
                    v.$message.error("请选择上传的图片并填写名称!");
                    return;
                }
                //发布轮播图请求
                v.form.url=v.url
                axios.post("http://localhost:8080/banner/updateBanner",v.form)
                    .then(function (res) {
                        if (res.data==1){
                            v.dialogFormVisible = false
                            v.$message.success("修改成功!")
                            v.loadBanner()
                            v.form={}
                            v.$refs.upload.clearFiles()
                        }else {
                            this.$message.error("添加轮播图失败!")
                            v.form={}
                        }
                    })
                v.form={}
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                axios.get("http://localhost:8080/product/removeProduct?name=" + file.response)
                    .then(function (response) {
                        let all=[]
                        for (let file of fileList) {
                            all.push(file.response)
                        }
                        v.url=all.toString();
                        console.log("删除后的;"+v.url)
                })

            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = false;
            },
            handleSuccess(response,file, fileList) {
                //response代表上传成功时服务器返回的图片路径
                let all=[]
                for (let file of fileList) {
                    all.push(file.response)
                }
                v.url=all.toString();
                console.log("上传成功的"+v.url)
            },
            goBack(){
                history.back();//返回上一页面
            },
            exceed(){
                v.$message.error("图片只能选择1个!");
            },

            bannerDelete(index,banner){
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("http://localhost:8080/banner/deleteById",banner)
                        .then(function (res) {
                            v.loadBanner()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //轮播图管理方法结束

            //商品分类管理方法开始
            addCategory() {
                v.form.id=null
                if (v.form.name==''||v.form.name==null){
                    v.$message.warning("输入的值不能为空!")
                }else {
                    axios.post("http://localhost:8080/category/addCategory",v.form)
                        .then(function (res) {
                            if (res.data==1){
                                v.dialogFormVisible1 = false
                                v.$message.success("新增成功!")
                                v.loadCategory()
                            }else{
                                v.$message.error("新增分类已存在!")
                            }
                        })
                }
                v.form={}
            },
            updateCategory(index,category){
                v.dialogFormVisible = true
                v.form.id=category.id
            },
            sureUpdateCategory(){
                if (v.form.name==''||v.form.name==null){
                    v.$message.warning("输入的值不能为空!")
                }else {
                    axios.post("http://localhost:8080/category/updateCategory",v.form)
                        .then(function (res) {
                            if (res.data==1){
                                v.dialogFormVisible = false
                                v.$message.success("修改成功!")
                                v.loadCategory()
                            }else{
                                v.$message.error("新增分类已存在!")
                            }
                        })
                }
                v.form={}
            },
            categoryDelete(index,category){
                    this.$confirm('确定删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get("http://localhost:8080/category/deleteById?id="+category.id)
                            .then(function (res) {
                                v.loadCategory()
                            })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
            menuChange(index){
                v.index = index;
                if (index=="1-1"){
                    v.loadCategory()
                }else if(index=="2-1"){
                    v.loadBanner()
                }else if(index=="3-1"){
                    v.loadProduct()
                }
            },
            loadCategory(){
                axios.get("http://localhost:8080/category/selectall")
                    .then(function (res) {
                        v.categoryArr=res.data
                        console.log(v.categoryArr)
                    })
            },
            loadBanner(){
                axios.get("http://localhost:8080/banner/select")
                    .then(function (res) {
                        v.bannerArr=res.data
                        console.log(v.bannerArr)
                    })
            },
            loadProduct(){
                axios.get("http://localhost:8080/product/selectAll")
                    .then(function (res) {
                        let products=res.data
                        //对拿到的数据每一个商品对象做处理让urls变成数组显示第一个图片路径
                        for (let product of products) {
                          let urls = product.urls!=null ? product.urls.split(","):product.urls;
                           product.urls=urls
                        }
                        v.productArr=products
                    })
            },
            deleteCategoryByids(){
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("http://localhost:8080/category/deleteByids",v.multipleSelection)
                        .then(function (res) {
                            v.loadCategory()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("选中的列"+v.multipleSelection)
            }
            //商品分类管理方法结束
        }
    })
</script>
</html>